<template>
  <el-container>
    <!--查询条件开始-->
    <el-header height="1">
      <el-form ref="queryForm" :model="parmsValue.query" size="small" label-width="120px" class="middle-form">
        <el-row>
          <el-col :span="8">
            <el-form-item label="姓名" prop="cust_name">
              <el-input v-model="parmsValue.query.cust_name" :clearable="true" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务类型" prop="cust_type">
              <el-select v-model="parmsValue.query.cust_type" :clearable="true">
                <el-option v-for="(item, index) in dict.cust_type" :key="index" :label="item" :value="index" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-button type="success" size="small" @click="query">查询</el-button>
          <el-button type="info" size="small" @click="resetFields('queryForm')">重置</el-button>
          <el-button type="success" size="small" @click="showDialog('add')">新增</el-button>
        </el-row>
      </el-form>
    </el-header>
    <!--查询条件结束-->
    <!--列表开始-->
    <el-main>
      <table-pagination
        :table-data="table.staff.tableData"
        :table-header-config="table.tableHeaderConfig"
        :total="table.staff.total"
        :page-size="table.staff.limit"
        :now-page="table.staff.nowPage"
        :operation-config="table.operationConfig"
        :dict-data="dict"
        @current-change="currentChange"
      />
    </el-main>
    <!--列表结束-->
    <!--弹框开始-->
    <el-dialog :title="editModStr" :visible.sync="parmsValue.updateOpen" :before-close="handleClose">
      <el-form ref="updateForm" size="small" :model="parmsValue.update" label-width="180px" :rules="form.rules">
        <el-row>
          <el-col :span="12">
            <el-form-item prop="cust_name" label="姓名">
              <el-input v-model="parmsValue.update.cust_name" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="cust_type" label="业务类型">
              <el-select v-model="parmsValue.update.cust_type" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.cust_type" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="id_type" label="证件类型">
              <el-select v-model="parmsValue.update.id_type" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.id_type" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="id_code" label="证件号码">
              <el-input v-model="parmsValue.update.id_code" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="mobile" label="手机号">
              <el-input v-model="parmsValue.update.mobile" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="home_tel" label="座机">
              <el-input v-model="parmsValue.update.home_tel" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="email" label="邮箱">
              <el-input v-model="parmsValue.update.email" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="address" label="地址">
              <el-input v-model="parmsValue.update.address" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="sex" label="性别">
              <el-select v-model="parmsValue.update.sex" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.sex" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="institution" label="所属总行或分行">
              <el-select v-model="parmsValue.update.institution" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.t8_subordinate_institutions" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="area" label="所属区域">
              <el-select v-model="parmsValue.update.area" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.t8_sales_area" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="company" label="具体单位名称">
              <el-input v-model="parmsValue.update.company" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="department" label="所属部门">
              <el-input v-model="parmsValue.update.department" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="position" label="职位">
              <el-input v-model="parmsValue.update.position" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="education" label="学历">
              <el-select v-model="parmsValue.update.education" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.t8_education" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="degree" label="学位">
              <el-select v-model="parmsValue.update.degree" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.t8_degree" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="first_work_time" label="首次参加工作时间">
              <el-date-picker v-model="parmsValue.update.first_work_time" format="yyyy-MM-dd" value-format="yyyyMMdd" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="first_ams_time" label="首次从事理财业务时间">
              <el-date-picker v-model="parmsValue.update.first_ams_time" format="yyyy-MM-dd" value-format="yyyyMMdd" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="professional_titles" label="专业技术职称">
              <el-select v-model="parmsValue.update.professional_titles" :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.t8_professional_titles" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="financial_certificate" label="理财专业证书">
              <el-select v-model="parmsValue.update.financial_certificate" multiple :clearable="true" :disabled="parmsValue.editMod === 'detail'">
                <el-option v-for="(item,index) in dict.t8_financial_certificate" :key="index" :value="index" :label="item" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="financial_certificate_code" label="培训证书编号">
              <el-input v-model="parmsValue.update.financial_certificate_code" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="award" label="所获奖励">
              <el-input v-model="parmsValue.update.award" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="register_type" label="登记业务分类">
              <el-input v-model="parmsValue.update.register_type" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item prop="register_person" label="登记人员类别">
              <el-input v-model="parmsValue.update.register_person" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item prop="remark" label="备注">
              <el-input v-model="parmsValue.update.remark" :clearable="true" :disabled="parmsValue.editMod === 'detail'" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="info" size="small" @click="closeDialog">取消</el-button>
        <el-button type="success" size="small" @click="updateProdStaff">确定</el-button>
      </div>
    </el-dialog>
    <!--弹框开始-->
  </el-container>
</template>

<script>
  import { formItems } from '@/utils/formItems'
  import * as kk from '@/utils/k-utils'

  export default {
    data() {
      return {
        dict: {
          cust_type: {}, id_type: {}, sex: {}, t8_subordinate_institutions: {}, t8_sales_area: {}, t8_education: {}, t8_degree: {},
          t8_professional_titles: {}, t8_financial_certificate: {}, t8_register_type: {}, t8_register_person: {}
        },
        table: {
          staff: { total: 100, limit: 10, nowPage: 1, tableData: [], exeid: 'getProdStaff' },
          tableHeaderConfig: [
            formItems.custName, formItems.idCode, formItems.idType, formItems.custType,
            formItems.mobile, formItems.homeTel, formItems.email, formItems.address
          ],
          operationConfig: {
            fixed: 'left',
            width: 160,
            operationButton: [
              { value: '修改', func: (params) => this.showDialog('update', params) },
              { value: '删除', func: (params) => this.deleteProdStaff(params) },
              { value: '详情', func: (params) => this.showDialog('detail', params) }
            ]
          }
        },
        form: {
          rules: {
            cust_name: [{ required: true, message: '姓名必填', trigger: 'change' }],
            cust_type: [{ required: true, message: '业务类型必填', trigger: 'change' }],
            id_type: [{ required: true, message: '证件类型必填', trigger: 'change' }],
            id_code: [{ required: true, message: '证件号码必填', trigger: 'change' }],
            mobile: [{ required: true, message: '手机号必填', trigger: 'change' }],
            home_tel: [{ required: true, message: '座机必填', trigger: 'change' }],
            email: [{ required: true, message: '邮箱必填', trigger: 'change' }],
            sex: [{ required: true, message: '性别必填', trigger: 'change' }],
            institution: [{ required: true, message: '所属总行或分行必填', trigger: 'change' }],
            area: [{ required: true, message: '所属区域必填', trigger: 'change' }],
            department: [{ required: true, message: '所属部门必填', trigger: 'change' }],
            position: [{ required: true, message: '职位必填', trigger: 'change' }],
            education: [{ required: true, message: '学历必填', trigger: 'change' }],
            degree: [{ required: true, message: '学位必填', trigger: 'change' }],
            first_work_time: [{ required: true, message: '参加工作时间必填', trigger: 'change' }],
            first_ams_time: [{ required: true, message: '首次从事理财业务时间必填', trigger: 'change' }],
            professional_titles: [{ required: true, message: '专业技术职称必填', trigger: 'change' }],
            financial_certificate: [{ required: true, message: '理财专业证书必填', trigger: 'change' }],
            award: [{ required: true, message: '所获奖励必填', trigger: 'change' }],
            remark: [{ required: true, message: '备注必填', trigger: 'change' }]
          }
        },
        parmsValue: {
          query: {
            cust_name: '',
            cust_type: ''
          },
          // 增删改字段值
          update: {
            cust_name: '', cust_type: '', id_type: '', id_code: '', mobile: '', home_tel: '', email: '', sex: '', institution: '', area: '',
            department: '', position: '', education: '', degree: '', first_work_time: '', first_ams_time: '', professional_titles: '', financial_certificate: [],
            financial_certificate_code: '', award: '', register_type: '', register_person: '', remark: ''
          },
          updateOpen: false,
          editMod: 'update'
        }
      }
    },
    computed: {
      editModStr() {
        switch (this.parmsValue.editMod) {
        case 'update':
          return '修改产品人员信息'
        case 'add':
          return '新增产品人员信息'
        case 'detail':
        default:
          return '产品人员信息详情'
        }
      }
    },
    // 生命周期开始
    beforeMount() {
      this.loadDict()
      this.loadTable()
    },
    // 生命周期结束
    methods: {
      currentChange(index) {
        this.table.staff.nowPage = index
        this.loadTable()
      },

      loadDict() {
        kk.k_load_dict(this, 'cust_type', 't8_proddesign_cust_info')
        kk.k_load_dict(this, 'id_type', 't8_agent_id_type')
        kk.k_load_dict(this, 'sex', 'sex')
        kk.k_load_dict(this, 't8_subordinate_institutions', 't8_subordinate_institutions')
        kk.k_load_dict(this, 't8_sales_area', 't8_sales_area')
        kk.k_load_dict(this, 't8_education', 't8_education')
        kk.k_load_dict(this, 't8_proddesign_cust_info', 't8_proddesign_cust_info')
        kk.k_load_dict(this, 't8_professional_titles', 't8_professional_titles')
        kk.k_load_dict(this, 't8_financial_certificate', 't8_financial_certificate')
        kk.k_load_dict(this, 't8_register_type', 't8_register_type')
        kk.k_load_dict(this, 't8_register_person', 't8_register_person')
      },

      query() {
        this.table.staff.nowPage = 1
        this.loadTable()
      },

      loadTable() {
        this.table.staff.cust_name = this.parmsValue.query.cust_name
        this.table.staff.cust_type = this.parmsValue.query.cust_type
        kk.k_load_table(this, 'staff', formItems.PROD)
      },

      /**
       * 删除产品人员
       * @param params
       */
      deleteProdStaff(params) {
        this.$confirm('确认删除产品人员信息吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          kk.k_update_exeid(formItems.PROD, 'delProStaff', params).then(resp => {
            if (resp.success) {
              this.loadTable()
            }
          })
        })
      },

      resetFields(form) {
        this.$refs[form].resetFields()
      },

      handleData() {
        // 下拉多选框，数据拼接格式有出入，应为字符串拼接逗号，该框架是原生数组类型
        this.parmsValue.update.financial_certificate = this.parmsValue.update.financial_certificate.join(',')
      },

      reverseHandleData() {
        this.parmsValue.update.financial_certificate = this.parmsValue.update.financial_certificate.split(',')
      },

      updateProdStaff() {
        let exeid = ''
        switch (this.parmsValue.editMod) {
        case 'update':
          exeid = 'updateProdStaff'
          break
        case 'add':
        default:
          exeid = 'addProdStaff'
          break
        }

        this.$refs['updateForm'].validate(valid => {
          if (valid) {
            this.handleData()
            kk.k_update_exeid(formItems.PROD, exeid, this.parmsValue.update).then(resp => {
              if (resp.success) {
                this.closeDialog()
                this.loadTable()
              }
            })
          }
        })
      },

      /**
       * 显示弹框
       */
      showDialog(editMod, params = {}) {
        switch (editMod) {
        case 'add':
          this.parmsValue.editMod = 'add'
          this.parmsValue.updateOpen = true
          break
        case 'update':
          this.parmsValue.editMod = 'update'
          this.parmsValue.updateOpen = true
          this.$nextTick(() => {
            Object.assign(this.parmsValue.update, params)
            this.reverseHandleData()
          })
          break
        case 'detail':
        default:
          this.parmsValue.editMod = 'detail'
          this.parmsValue.updateOpen = true
          this.$nextTick(() => {
            Object.assign(this.parmsValue.update, params)
            this.reverseHandleData()
          })
          break
        }
      },

      /**
       * 弹框关闭逻辑
       */
      handleClose(done) {
        this.resetFields('updateForm')
        done()
      },
      closeDialog() {
        this.parmsValue.updateOpen = false
        this.resetFields('updateForm')
      },

      /**
       * 删除产品系列
       * @param params
       */
      deleteProdSeries(params) {
        this.$confirm('确认删除产品系列吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          kk.k_update_exeid(formItems.PROD, 'delProdSeries', params).then(resp => {
            if (resp.success) {
              this.loadTable()
            }
          })
        }).catch(() => {
        })
      }

    }
  }
</script>
